<template>
	<view class="kui-popup">
		<kui-overlay @close="close" :close-on-click-mask="data.isMaskClick" :vnode-center="false" ref="popup-shade">
			<template v-slot:content>
				<view class="kui-w-full kui-h-full" :class="[data.classes]">
					<!-- <view
						class="kui-w-full kui-flex kui-flex-col kui-fixed"
						:class="[data.positionClass]"
						:style="{
							height: data.popupContainerHeight,
							width: data.popupContainerWidth
						}"
					>
						
					</view> -->
					<view
						class="popup-content kui-fixed kui-py-0 kui-box-border"
						:class="[data.containerClass, data.position === 'top' && data.radiusSize ? 'kui-pb-4' : '']"
						:style="{
							width: data.width,
							minHeight: data.height,
							backgroundColor: data.backgroundColor,
							borderTopLeftRadius: `${data.position == 'bottom' || data.position == 'center' ? data.radiusSize : 0}rpx`,
							borderTopRightRadius: `${data.position == 'bottom' || data.position == 'center' ? data.radiusSize : 0}rpx`,
							borderBottomLeftRadius: `${data.position == 'top' || data.position == 'center' ? data.radiusSize : 0}rpx`,
							borderBottomRightRadius: `${data.position == 'top' || data.position == 'center' ? data.radiusSize : 0}rpx`
						}"
					>
						<view v-if="showIcon">
							<view class="kui-w-full kui-flex kui-justify-end" v-if="closeIconPosition == 'right'">
								<view class="kui-relative" style="top: 30rpx;right: 30rpx;" @click="onClickCloseIcon"><kui-icons :type="closeIconType" :color="closeIconColor" :size="closeIconSize"></kui-icons></view>
							</view>
							<view class="kui-w-full kui-flex" v-if="closeIconPosition == 'left'">
								<view class="kui-relative" style="top: 30rpx;left: 30rpx;" @click="onClickCloseIcon"><kui-icons :type="closeIconType" :color="closeIconColor" :size="closeIconSize"></kui-icons></view>
							</view>
						</view>
						<slot></slot>
					</view>
					<view>
						<slot name="content"></slot>
					</view>
				</view>
			</template>
		</kui-overlay>
	</view>
</template>

<script lang="ts">
import { reactive, getCurrentInstance, onMounted, defineComponent, SetupContext, useSlots } from 'vue';

const name = 'kui-popup';

import PopupProps from './props';
import { KuiPopupProps } from './type';

export default defineComponent({
	name,
	props: PopupProps,
	emits: ['open', 'close', 'click-close-icon'],
	options: {
		// 小程序虚拟节点设置
		virtualHost: true
	},
	setup(props, context: SetupContext) {
		const { proxy }: any = getCurrentInstance();
		const theme = proxy.$theme;

		const sysinfo = uni.getSystemInfoSync();

		const data = reactive({
			width: ``,
			height: '',
			popupContainerHeight: '100%',
			popupContainerWidth: '100%',
			position: props.position,
			classes: '',
			positionClass: '',
			containerClass: '',
			isMaskClick: props.closeOnClickMask,
			radiusSize: theme.size.radiusSize[props.radiusSize],
			topStyle: '',
			useContentSlot: useSlots().content,
			backgroundColor: 'white',
			mode: props.mode
		});

		const positionInAnimate = position => {
			data.containerClass = position;
			if (position == 'center') {
				data.positionClass = 'kui-items-center kui-justify-center';
				// data.topStyle = `${sysinfo.windowHeight / 2 - 44}px`;
				console.log(data.topStyle);
				// data.popupContainerHeight = `${sysinfo.screenHeight}px`;
				return 'scale-in-center';
			}
			// if (position == 'right') {
			// 	data.positionClass = 'kui-items-end';
			// }

			// if (position == 'bottom') {
			// 	data.positionClass = 'kui-justify-end';
			// }

			return `slide-in-${position}`;
		};

		const positionOutAnimate = position => {
			if (position == 'center') {
				return 'scale-out-center';
			}

			return `slide-out-${position}`;
		};

		const open = () => {
			// if (data.position != 'bottom') {
			// 	uni.pageScrollTo({ scrollTop: 0 });
			// }
			// if (data.position == 'bottom') {
			// 	uni.pageScrollTo({
			// 		scrollTop: sysinfo.windowHeight
			// 	});
			// }
			proxy.$refs['popup-shade'].changeMaskClick(false);
			proxy.$refs['popup-shade'].open();
			data.classes = positionInAnimate(props.position);
			context.emit('open');
		};

		const forceClose = () => {
			proxy.$refs['popup-shade'].changeMaskClick(true);
			data.classes = positionOutAnimate(props.position);
			setTimeout(() => {
				proxy.$refs['popup-shade'].close();
				context.emit('close');
			}, 200);
		};

		const close = () => {
			if (!props.closeOnClickMask) return;
			// proxy.$refs['popup-shade'].changeMaskClick(true);
			// data.classes = positionOutAnimate(props.position);
			// setTimeout(() => {
			// 	proxy.$refs['popup-shade'].close();
			// 	context.emit('close');
			// }, 200);
			forceClose();
		};

		const onClose = () => {
			console.log('close');
		};

		const changeRadiusSize = (radiusSize: KuiPopupProps['radiusSize']) => {
			data.radiusSize = theme.size.radiusSize[radiusSize];
		};

		const onClickCloseIcon = () => {
			context.emit('click-close-icon');
		};

		data.radiusSize = theme.size.radiusSize[props.radiusSize];
		
		const changeMode = () => {
			if (data.mode === 'light') {
				data.backgroundColor = 'white';
			}
			if (data.mode === 'dark') {
				data.backgroundColor = theme.colors[data.mode]['grey'][1];
			}
		};
		
		uni.$on("changeMode", (e) => {
			data.mode = e;
			changeMode();
		});

		onMounted(() => {
			if (data.position == 'center') {
				// data.width = `${sysinfo.windowWidth * (3 / 4)}px`;
				// data.height = `${sysinfo.windowHeight * (1 / 6)}px`;
				return false;
			}
			if (data.position == 'left' || data.position == 'right') {
				data.width = `${sysinfo.windowWidth / 2}px`;
				data.height = '100%';
			}
			if (data.position == 'top' || data.position == 'bottom') {
				data.height = props.height ? props.height : `${sysinfo.windowHeight / 3}px`;
				data.width = `${sysinfo.windowWidth}px`;
				// data.popupContainerHeight = '100%';
			}
			if (data.position == 'bottom' || data.position == 'right') {
				// data.popupContainerWidth = `${sysinfo.windowWidth}px`;
			}
		});

		return {
			data,
			positionInAnimate,
			positionOutAnimate,
			changeRadiusSize,
			open,
			close,
			onClose,
			onClickCloseIcon,
			forceClose,
			proxy
		};
	}
});
</script>

<style scoped>
.popup-content {
	/* animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; */
}

.center {
	/* margin: 0 auto; */
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.right {
	right: 0px;
	/* #ifdef H5 */
	top: 44px;
	/* #endif */
	/* #ifndef H5 */
	top: 0;
	/* #endif */
}

.left {
	/* #ifdef H5 */
	top: 44px;
	/* #endif */
	/* #ifndef H5 */
	top: 0;
	/* #endif */
	left: 0px;
}

.top {
	/* #ifdef H5 */
	top: 44px;
	/* #endif */
	/* #ifndef H5 */
	top: 0;
	/* #endif */
	left: 0;
}

.bottom {
	bottom: 0;
	left: 0;
}

.scale-in-center {
	animation: scale-in-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes scale-in-center {
	0% {
		transform: scale(0.3);
	}
	100% {
		transform: scale(1);
	}
}

.scale-out-center {
	animation: scale-out-center 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes scale-out-center {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.3);
	}
}

.slide-in-top {
	animation: slide-in-top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-top {
	0% {
		transform: translateY(-1000px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.slide-out-top {
	animation: slide-out-top 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes slide-out-top {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateY(-1000px);
		opacity: 0;
	}
}

.slide-in-right {
	animation: slide-in-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-right {
	0% {
		transform: translateX(1000px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.slide-out-right {
	animation: slide-out-right 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes slide-out-right {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	100% {
		transform: translateX(1000px);
		opacity: 0;
	}
}

.slide-in-bottom {
	animation: slide-in-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-bottom {
	0% {
		transform: translateY(1000px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.slide-out-bottom {
	animation: slide-out-bottom 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes slide-out-bottom {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateY(1000px);
		opacity: 0;
	}
}

.slide-in-left {
	animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-left {
	0% {
		transform: translateX(-1000px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.slide-out-left {
	animation: slide-out-left 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes slide-out-left {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	100% {
		transform: translateX(-1000px);
		opacity: 0;
	}
}
</style>
